$(function () {
  

  // 封装初始化文章分类的函数
  function initCateList() {
    // 发送请求拿服务器中的数据
    axios.get('/my/cate/list').then(({data:res}) => {
      // 定义空数组
      let rows = []
      // 循环遍历请求到的数据
      res.data.forEach((item, index) => {
        // 渲染标签结构
        rows.push(`
          <tr>
            <td>${index+1}</td>
            <td>${item.cate_name}</td>
            <td>${item.cate_alias}</td>
            <td>
              <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="${item.id}">修改</button>
              <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
            </td>
          </tr>
        `)
      })
      // 将渲染好的标签结构添加到tbody框架中
      $('tbody').html(rows)
    })
  }
  initCateList()




  //"添加分类"的弹出层
  let addIndex = null
  $('#btnShowAdd').on('click', function () {
    addIndex = layer.open({
      type: 1,
      area:['400px','220px'],
      title: '添加文章分类',
      content: $('#hide1').html()
    });  
  })



  // 自定义表单规则
  layui.form.verify({
    //分类名称规则
    name:[/^\S{1,10}$/,'1-10位非空字符串'],
    // 分类别名规则
    alias:[/^[a-zA-Z0-9]{1,15}$/,'1-15位的数字或字母']
  })


  // 添加分类监听事件
  $('body').on('submit', '#form-add', function (e) {
    //阻止默认事件
    e.preventDefault()
    // 发送Ajax请求            获取表单所有内容
    axios.post('/my/cate/add', $(this).serialize()).then(({ data: res }) => {
      // 判断请求是否成功
      if (res.code === 0) {
        layer.msg('添加成功')
        // 添加数据到服务器后 重新获取服务器内容并渲染表格
        initCateList()
        // 关闭这个弹出层
        layer.close(addIndex)
      }
    })
  })





  //"修改"的弹出层
  let editIndex = null
  $('tbody').on('click', '.btn-edit', function () {

     // 获取点击的修改的那一行的id值
    let id = $(this).attr('data-id')
    if (id == 1 || id == 2) {
      return layer.msg('管理员不允许修改此条数据')
    }
    //设置弹出层样式
    editIndex = layer.open({
      type: 1,
      area:['400px','220px'],
      title: '修改文章分类',
      content: $('#hide2').html()
    });  
   
    console.log(id)
    // 发送请求获取id值对应的那一行的内容
    axios.get('/my/cate/info', {
      params:{id}
    }).then(({ data: res }) => {
      console.log(res)
      if (res.code === 0) {
        // 将获取的内容渲染到弹出层中
        layui.form.val('form-edit',res.data)
      }
    })
  })



  // 监听修改表单的submit事件
  $('body').on('submit', '#form-edit', function (e) {
    e.preventDefault()
    let data = $(this).serialize()
    axios.put('/my/cate/info',data).then(({ data: res }) => {
      if (res.code == 0) {
        layer.msg('更新成功')
        
        layer.close(editIndex)
        initCateList()
      }
    })
  })




  //删除事件
  $('body').on('click', '.btn-delete', function () {
    let id = $(this).attr('data-id')
    console.log(id)
    if (id == 1 || id== 2){
      return layer.msg('管理员不允许删除此条数据')
    }
    layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
      axios.delete('/my/cate/del', {
        params: {id}
      }).then(({ data: res }) => {
        initCateList()
      })
      // 关闭弹出层
      layer.close(index);
    });
  })



console.log(123)

})